<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>管理信息系统课程设计 | MISP</title>
    <#include "/inc/head.ftl"/>
    <@head/>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://code.highcharts.com/highcharts.js"></script>
</head>

<body>
<div id="wrapper">
    <!-- Navigation -->
    <#include "/inc/nav.ftl"/>
    <@nav/>
    <div id="page-wrapper">
        <div class="row">
            <div class="col-lg-12">
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->
            <div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">报表</div>
                    </div>
                    <!-- /.panel -->
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
        </div>
        <!-- /#page-wrapper -->
    </div>
    <!-- /#wrapper -->
</div>
<!-- Page-Scripts  -->
<script language="JavaScript">
    $(document).ready(function() {
        var title = {
            text: '销售业绩报表'
        };
        var subtitle = {
            text: 'Source: misp_13'
        };
        var xAxis = {
            categories: ['一月', '二月', '三月', '四月', '五月', '六月'
                ,'七月', '八月', '九月', '十月', '十一月', '十二月']
        };
        var yAxis = {
            title: {
                text: '销售额（/份）'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        };

        var tooltip = {
            valueSuffix: '份'
        }

        var legend = {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        };

        var series =  [
            {
                name: '法式红酒炖焗鹅肝',
                data: [7, 6, 9, 14, 10, 8, 6,
                  5, 3, 5, 4, 9]
            },
            {
                name: '葡式蛋挞',
                data: [8, 5, 11, 17, 2, 8,
                    4, 20, 14, 6, 5]
            },
            {
                name: '杏汁炖白肺',
                data: [6, 5, 8, 13, 7, 8,
                    17, 14, 9, 3, 1.0]
            },
            {
                name: '牛排',
                data: [3, 4, 5, 8, 11, 15, 17,
                    6, 2, 3, 6, 8]
            }
        ];

        var json = {};

        json.title = title;
        json.subtitle = subtitle;
        json.xAxis = xAxis;
        json.yAxis = yAxis;
        json.tooltip = tooltip;
        json.legend = legend;
        json.series = series;

        $('#container').highcharts(json);
    });
</script>
</body>
</html>